﻿class Product{
    // title = 'DEFAULT';
    // imageUrl;
    // description;
    // price;

    constructor(title, imageUrl, desc,price){
        this.title = title;
        this.imageUrl = imageUrl;
        this.description = desc;
        this.price = price;
    }
}

class ElementAttribute{
    constructor(attrName, attrValue) {
        this.name = attrName;
        this.value = attrValue;
    }
}

class Component{
    constructor(renderHookId,shouldRender = true) {
        this.hookId = renderHookId;
        if(shouldRender){
            this.render();
        }
    }

    render(){

    }
    createRootElement(tag,cssClasses,attributes){
        const rootElement = document.createElement(tag);
        if(cssClasses){
            rootElement.className = cssClasses;
        }
        if(attributes && attributes.length > 0){
            for(const attr of attributes){
                rootElement.setAttribute(attr.name,attr.value);
            }
        }
        document.getElementById(this.hookId).append(rootElement);
        return rootElement;
    }
}

class ShoppingCart extends Component {
    items=[];

    set cartItems(value){
        this.items = value;
        this.totalOutput.innerHTML = `<h2>Total:\$${this.totalAmount.toFixed(2)}</h2>`;
    }

    get totalAmount(){
        const sum = this.items.reduce((prevValue, curItem) => prevValue + curItem.price
        ,0);
        return sum;
    }

    constructor(renderHookId) {
        super(renderHookId,false);
        this.orderProducts=()=>{
            console.log(this.items);
        }
        this.render();
    }

    addProduct(product){
        const updatedItems = [...this.items];
        updatedItems.push(product);
        this.cartItems = updatedItems;
    }



    render(){
        const cartEl =  this.createRootElement('section','cart');
        cartEl.innerHTML = `
            <h2>Total:\$${0}</h2>
            <button>Order Now</button>
        `;
        const orderButton = cartEl.querySelector('button');
        //orderButton.addEventListener('click',()=>this.orderProducts());
        orderButton.addEventListener('click',this.orderProducts);
        this.totalOutput = cartEl.querySelector('h2');
    }
}

class ProductItem extends Component {
    constructor(product,renderHookId) {
        super(renderHookId,false);
        this.product = product;
        this.render();
    }

    addToCart(){
        App.addProductToCart(this.product);
    }

    render(){
        const prodEl = this.createRootElement('li','product-item');
        prodEl.innerHTML =`
                <div>
                    <img src="${this.product.imageUrl}" alt="${this.product.title}">
                    <div class="product-item__content">
                        <h2>${this.product.title}</h2>
                        <h3>\$${this.product.price}</h3>
                        <p>${this.product.description}</p>
                        <button>Add to Cart</button>
                    </div>
                </div>
            `;
        const addCartButton = prodEl.querySelector('button');
        addCartButton.addEventListener('click',this.addToCart.bind(this));
    }
}


class ProductList extends Component {
    #products = [];

    constructor(renderHookId) {
        super(renderHookId,false);
        this.render();
        this.fetchProducts();
    }

    fetchProducts(){
        this.#products = [
            new Product(
                'A Book',
                'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/238046/29/19841/155890/667d2ac6Fa0baa2b8/cbeb0cbedf15d430.jpg.avif',
                '虛拟演兵——兵棋、作战模拟与仿真 解放军出版社 附军采目录',
                19.99,
            ),
            new Product(
                'A Screen',
                'https://img20.360buyimg.com/jdcms/s240x240_jfs/t1/256950/37/12895/99669/678e553dFfa1c6cad/fdd949a2ccc9499f.jpg.avif',
                'Nano IPS 27.6英寸超2K 16:18显示器LG屏幕',
                1900.99
            )
        ];
        this.renderProducts();
    }

    renderProducts(){
        for(const prod of this.#products){
            new ProductItem(prod,'prod-list');
        }
    }

    render(){
        this.createRootElement('ul','product-list',
            [new ElementAttribute('id','prod-list')]);
        if(this.#products && this.#products.length > 0){
            this.renderProducts();
        }
    }
}

class Shop {
    constructor() {
        this.render();
    }

    render(){
        this.cart = new ShoppingCart('app');
        new ProductList('app');
    }
}

class App{
    static init(){
        const shop = new Shop();
        this.cart = shop.cart;
    }

    static addProductToCart(product){
        this.cart.addProduct(product);
    }
}

App.init();
